<!DOCTYPE html>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script> -->
    <script src="../node_modules/vue/dist/vue.global.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>

<body>
    <div id="app">
        <p id="p1" @click="addCount">count:{{count}}</p>
        <!-- <p>nusername:{{nusername}}</p> -->
        <p @click="username='周杰'">username:{{username}}</p>
    </div>
</body>

</html>
<script>
    //
    const { createApp } = Vue;
    const vm = createApp({
        data() {
            return {
                count: 0,
                schoolList: [],
                username: '任泉'
            }
        },
        methods: {
            addCount() {
                this.count++
            }
        },
        computed: {
            doubleCount() {
                return this.count * 2
            }
        },
        setup() { // 选项式的setup 写法 , 该种写法过渡写法
            //console.log('setup');
            // console.log(this); // 该组合式api 中作用域内 this 指向window, 不是当前的组件实例
            // 为什么? 
            // 因为当前组件实例还没有创建,所有此时没有this 没有vm
        },
        beforeCreate() {
            // 当前组件的实例初始化已经完成, 但是实例上的属性和方法还没有完成绑定实例
            // 当前 的实例并不完成, 没有计算属性. data 属性. methods 方法
            // 特点: 很少使用
            //console.log('beforeCreate');
            // console.log(this);
            // console.log('count', this.count);
            // console.log('methods', this.addCount);
            // console.log('computed', this.doubleCount);
        },
        created() {
            console.log('created', this);

            // 创建完成, 并且当前实例上的所有的属性方法都已经绑定在实例上
            //console.log('created');
            // console.log(this);
            // console.log('count', this.count);
            // console.log('methods', this.addCount);
            // console.log('computed', this.doubleCount);

            // 特点: 使用比较多, 
            // 一般用来进行数据的请求操作,请求数据的操作一般伴随修改data数据的操作, 
            // 此时获取不到data ,所以才在该生命周期进行数据请求操作
            // axios({
            //     method: 'get',
            //     url: 'https://api.i-lynn.cn/college?page=' + this.currentPage
            // }).then(res => {
            //     console.log('res', res);
            //     this.schoolList = res.data.data.list1
            //     console.log(this.schoolList);
            // })
        },
        beforeMount() {
            // 挂载前, 表示当前数据渲染出来的dom 节点还 没有挂载到dom 数据上
            // console.log('beforeMount');
            //console.log(document.querySelector('p')); //null
            // 该生命周期不常用, 因为节点还没有绑定在dom 树上
        },
        mounted() {
            // 挂载后, 表示当前节点已经挂载到dom 树上了
            //console.log('mounted');
            // console.log(document.querySelector('p')) // p 
            // 
        },
        beforeUpdate() {

            // 当时数据变化的时候执行, 当前绑定数据的dom 更新前调用
            console.log('beforeUpdate');
            //console.log(this.count); // 数据已经更新
            console.log(document.getElementById('p1').innerHTML); // 上一次的数据
            console.log(document.getElementById('p1'));
            // 该步骤中, 虚拟都没已经创建,虚拟dom这个js 对象中的数据已经变了, 但是真实的dom 还没有更新
        },
        updated() {
            console.log('更新');
            // console.log('updated');
            //console.log(this.count); // 数据已经更新
            //console.log(document.querySelector('p').innerHTML); // 最新的dom 数据
        },
        beforeUnmount() {
            // 组件实例卸载/销毁前调用
            // 
        },
        ummounted() {
            //组件实例卸载后/销毁后调用
            // 执行清除副作用: 包括清除定时器, 清除事件绑定, 取消数据请求等等
        }
    }).mount('#app')
</script>